{% extends "../base/base.html" %}

{% block main %}
<div class="edit-page">
    <el-button-group>
        <el-button type="primary" @click="handleAddModule">增加</el-button>
    </el-button-group>
    <br>
    <br>
    <el-table
            :data="tableData"
            style="width: 100%">
        <el-table-column
                prop="id"
                label="id">
        </el-table-column>
        <el-table-column
                prop="name"
                label="模块名称"
                width="180">
        </el-table-column>
        <el-table-column
                prop="title"
                label="标题">
        </el-table-column>
        <el-table-column
                prop="descript"
                label="描述">
        </el-table-column>
        <el-table-column
                prop="img"
                label="图片">
            <template slot-scope="scope">
                <img width="50" :src="scope.row.img" alt="">
            </template>
        </el-table-column>
        <el-table-column
                prop="status"
                label="状态">
            <template slot-scope="scope">
                ${scope.row.status==1?'启用':'禁用'}
            </template>
        </el-table-column>
        <el-table-column
                prop="sort"
                label="排序">
        </el-table-column>
        <el-table-column
                prop="created_at"
                label="创建时间">
        </el-table-column>
        <el-table-column
                prop="updated_at"
                label="修改时间">
        </el-table-column>
        <el-table-column
                label="操作">
            <template slot-scope="scope">
                <el-button size="medium" type="text" icon="el-icon-edit" @click="handleEdit(scope)"></el-button>
                <el-button size="medium" type="text" icon="el-icon-delete" @click="handleDelete(scope)"></el-button>
            </template>
        </el-table-column>
    </el-table>
    <div class="pager">
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 20]"
                layout=" prev, pager, next,sizes,total, jumper"
                :total="total">
        </el-pagination>
    </div>
    <el-dialog
            title="新增"
            :visible.sync="dialogVisible"
            width="30%">
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="选择模块">
                <el-select v-model="form.module_id" placeholder="请选择模块">
                    <el-option v-for="item in selectData" :label="item.name" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="标题">
                <el-input v-model="form.title"></el-input>
            </el-form-item>
            <el-form-item label="描述">
                <el-input v-model="form.descript"></el-input>
            </el-form-item>
            <el-form-item label="图片">
                <el-upload
                        class="avatar-uploader"
                        action="/common/uploadimg"
                        :show-file-list="false"
                        accept="image/*"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                    <img v-if="form.img" :src="form.img" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="状态">
                <el-switch v-model="form.status" active-text="启用" inactive-text="禁用" :active-value="1" :inactive-value="0" >
                </el-switch>
            </el-form-item>
            <el-form-item label="排序">
                <el-input v-model="form.sort"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">立即创建</el-button>
                <el-button @click="dialogVisible=false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

    <el-dialog
            title="编辑"
            :visible.sync="dialogEditVisible"
            width="30%">
            <el-form ref="editForm" :model="form" label-width="80px">
                <el-form-item label="选择模块">
                    <el-select v-model="editForm.module_id" placeholder="请选择模块">
                        <el-option v-for="item in selectData" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="标题">
                    <el-input v-model="editForm.title"></el-input>
                </el-form-item>
                <el-form-item label="描述">
                    <el-input v-model="editForm.descript"></el-input>
                </el-form-item>
                <el-form-item label="图片">
                    <el-upload
                            class="avatar-uploader"
                            action="/common/uploadimg"
                            :show-file-list="false"
                            accept="image/*"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                        <img v-if="editForm.img"  :src="editForm.img" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="状态">
                    <el-switch v-model="editForm.status" active-text="启用" inactive-text="禁用" :active-value="1" :inactive-value="0" >
                    </el-switch>
                </el-form-item>
                <el-form-item label="排序">
                    <el-input v-model="editForm.sort"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleEditSubmit">编辑</el-button>
                    <el-button @click="dialogEditVisible=false">取消</el-button>
                </el-form-item>
            </el-form>
    </el-dialog>
</div>
{% endblock %}
{% block js%}
<script>
  new Vue({
    el: '#app',
    delimiters: ['${', '}'],
    data: function() {
      return {
        currentPage:{{page}},
      total:1000,
        size:{{pagesize}},
      dialogVisible:false,
        dialogEditVisible:false,
        tableData:[],
        selectData:[],
        form:{
            module_id:'',
            title:"",
            descript:"",
            img:"",
            status:1,
            sort:1
          },
          editForm:{
                id:0,
                module_id:0,
                title:"",
                  descript:"",
                  img:"",
                  status:1,
                  sort:1
          },
          imageUrl:''
    }
    },
    created(){
      this.getList()
      this.getSelectList()
    },
    methods:{
      handleAddModule() {
        this.dialogVisible = true;
      },

      handleSizeChange(size) {
        this.size = size;
        this.getList()
      },

      handleCurrentChange(page) {
        location.href = location.origin+location.pathname+'?page='+page+'&pagesize='+this.size;
      },
      handleEdit(scope){
        this.dialogEditVisible = true;
        this.editForm = scope.row;
      },
      handleEditSubmit(){
        console.log(this.editForm);
        axios.post('/modulelist/change',this.editForm).then(data=>{
          if(data.data.errno ===0){
            this.$message.success('修改成功')
            setTimeout(()=>{
              location.reload()
            },300)
          }else{
            this.$message.error(data.data.errmsg)
          }
        },err=>{
          this.$message.error(err);
        })
      },
      handleDelete(scope){
        axios.post('/modulelist/del',{id:scope.row.id}).then(data=>{
          if(data.data.errno ===0){
            this.$message.success('删除成功')
            setTimeout(()=>{
              location.reload()
            },300)
          }else{
            this.$message.error(data.data.errmsg)
          }
        },err=>{
          this.$message.error(err);
        })
      },
      getSelectList(){
        axios.get('/module/get',{
          params:{
            page:1,
            pagesize:10000
          }
        }).then((data)=> {
          this.selectData = data.data.data.data;
        },(err) =>{
          this.$message.error(err)
        })
      },
      getList(){
        axios.get('/modulelist/get',{
          params:{
            page:this.currentPage,
            pagesize:this.size
          }
        }).then((data)=> {
          this.total = data.data.data.count;
          this.currentPage = data.data.data.currentPage;
          this.tableData = data.data.data.data;
          // this.pageSize = data.data
        },(err) =>{
          this.$message.error(err)
        })
      },
      onSubmit(){
        axios.post('/modulelist/add',this.form).then( (data)=> {
          if(data.data.errno === 0){
            this.$message.success('新增成功')
            setTimeout(()=>{
              location.reload()
            },300)
          }else{
            this.$message.error(data.data)
          }
        }, (err)=> {
          this.$message.error(err)
        })
      },
      handleAvatarSuccess(data){
        this.form.img = data.data.url;
      },
      beforeAvatarUpload(){

      }
    }
  })
</script>
{% endblock %}

